<template>
    <div id="order">
        <div class="search_bar clearfix">
            <a href="index.html"><img src="../assets/images/logo.png"  class="logo fl"></a>
            <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;订单</div>
            <div class="search_con fr">
                <input type="text" class="input_text fl" name="" placeholder="搜索商品">
                <input type="button" class="input_btn fr" name="" value="搜索">
            </div>
        </div>
        <div class="total_count">全部商品<em>{{ products.length }}</em>件</div>
        <ul class="cart_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col02">商品单位</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
        </ul>

        <div id="goods">
            <ul ref="ul" class="cart_list_td clearfix" v-for="(sp, index) in products" :key="index">
                <li class="col01"></li>
                <li class="col02"></li>
                <li class="col03">{{ sp.name }}<br><em>{{ sp.price }}/{{ sp.unit }}</em></li>
                <li class="col04">{{ sp.unit }}</li>
                <li class="col05">{{ sp.price }}</li>
                <li class="col06">
                    <div class="num_add">

                        <input type="text" class="num_show fl" :value="sp.quantity">

                    </div>
                </li>
                <li class="col07">{{ sp.money }}</li>

            </ul>
        </div>


        <div id="receive">
            <h1 class="total_count">选择收货人</h1>
            <ul v-for="(item, index) in receive" class="cart_list_td clearfix" :key="index">
                <li>收货人姓名：{{ item.name }}&nbsp;</li>
                <li>收货人地址：{{ item.address }}&nbsp;&nbsp;</li>
                <li>收货人电话：{{ item.phone }}&nbsp;&nbsp;&nbsp;&nbsp;</li>
                <li><input type="radio" name="select" v-model="checkeds" :value="index"></li>
            </ul>
        </div>
        <ul class="settlements">
            <li class="col04"><a @click="toPay()">确认订单</a></li>
        </ul>
    </div>



</template>

<script>
import { getReceiveApi } from '../api/GetReceive'
import { toMakeOrderApi } from '../api/ToMakeOrder'
export default {
    data() {
        return {
            products: [],
            receive: [],
            checkeds: "0",
            productorder: {
                orderId: 1,
                state: 1,
                created: new Date(),
                freight: 3,
                payStyle: 0,
                distId: "",
                userId: JSON.parse(window.sessionStorage.getItem("user")).id,
                total: 0,

            },
            id: new Array(),
            orderid: "",
        }
    },
    methods: {
        getParams() {
            this.products = this.$route.query.product;
            getReceiveApi({ "id": JSON.parse(window.sessionStorage.getItem("user")).id }).then(resp => {
                this.receive = resp;
            })
        },
        async toPay() {
            console.log(this.checkeds);
            this.productorder.distId = this.receive[this.checkeds].id;
            console.log(this.productorder);
            console.log(this.id);
            await toMakeOrderApi({
                productorder: this.productorder,
                id: this.id,
            }).then(resp => {
                this.orderid = resp;
                console.log(this.orderid);
            });
            await this.$router.push({
                path: '/pay',
                query: {
                    orderId: this.orderid
                }
            })
        },
        getTotal() {
            for (let i = 0; i < this.products.length; i++) {
                this.productorder.total += this.products[i].money;
                this.id[i] = this.products[i].productid;
            }
        }

    },
    created() {
        this.getParams();
        this.getTotal();
    },

}
</script>